<template>
  <div class="box">
    <div class="top"></div>
    <!-- 左 -->
    <div class="left">
      <div class="left1">
        <Title title="监控情况"></Title>
        <ListTop></ListTop>
      </div>
      <div class="left2">
        <Title title="门禁情况"></Title>
        <ListBottom></ListBottom>
      </div>
        <div class="left3">
        <Title title="值班情况"></Title>
        <ListBottom1></ListBottom1>
      </div>
    </div>
    <!-- 中 -->
    <div class="center">
      <div class="center1">
        <CenterTop></CenterTop>
      </div>
      <div class="center2">
        <CenterVue></CenterVue>
      </div>
    </div>
    <!-- 右 -->
    <div class="right">
      <div class="right1">
            <Title title="监控画面"></Title>
            <RightTop></RightTop>
      </div>
      <div class="right2"></div>
        <div class="right3"></div>
    </div>
  </div>
</template>

<script setup>
import Title from '@/components/gong/Title.vue'
import ListTop from '@/components/jiankong/LeftTop.vue'
import ListBottom from '@/components/jiankong/LeftBottom.vue'
import ListBottom1 from '@/components/jiankong/LeftBottom1.vue'
import RightTop from '@/components/jiankong/RightTop.vue'
import CenterVue from '@/components/jiankong/Center.vue'
import CenterTop from '../components/jiankong/CenterTop.vue'
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: url('../assets/images/pageBg.png');
  display: flex;
  position: relative;
  left: 0;
  top: 0;
}
.top {
  width: 100vw;
  height: 70px;
  background: url('../assets//images/Top.png') no-repeat 0 0/100% 100%;
  position: absolute;
  top: 0;
}

.left {
  width: 32vw;
  height: 100vh;
  background: url('../assets//images/Left.png') no-repeat 0 0 /100% 100%;
}
.left1 {
  margin: 0px 70px 0px 60px;
  background: #0c1d5f;
  height: 36vh;
}
.left2 {
  margin: 0px 70px 0px 60px;
  background: #0c1d5f;
  height: 20vh;
  margin-top: -45px;
}
.left3 {
  margin: 0px 70px 0px 60px;
  background: #0c1d5f;
  height: 30vh;
  margin-top: -45px;
}
.center {
  width: 36vw;
  height: 100vh;
  /* background-color: red; */
}
.right {
  width: 32vw;
  height: 100vh;
  background: url('../assets/images/Right.png') no-repeat 0 0 /100% 100%;
}
.right1 {
  margin: 5px 60px 5px 60px;
  background: #0c1d5f;
  height: 31vh;
}
.right2 {
  margin: 5px 60px 5px 60px;
  background: #0c1d5f;
  height: 26vh;
}

.right3 {
  margin: 5px 60px 5px 60px;
  background: #0c1d5f;
  height: 26vh;
}
.center1 {
  width: 100%;
  height: 60vh;
  margin-top: 50px;
  /* border: solid 1px red; */
}

.center2 {
  width: 100%;
  height: 10vh;
  /* border: solid 1px red; */
  margin-top: 22vh;
}

</style>
